<template>
  <div class="divBox" style="padding:10px 0">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix" style="margin-top:10px">
        <el-button type="primary" @click="adddraw" size="small">新增抽奖</el-button>
      </div>

      <!-- <el-tabs v-model="loginType" @tab-click="getList(1)">
        <el-tab-pane
          :label="item.name"
          :name="item.type.toString()"
          v-for="(item, index) in headeNum"
          :key="index"
        />
      </el-tabs> -->
      <el-table
        ref="table"
        v-loading="listLoading"
        :data="list"
        style="width: 100%"
        size="mini"
        highlight-current-row
      >
        <el-table-column
          prop="name"
          label="抽奖名称"
          align="center"
        />
        <el-table-column
          prop="number"
          label="抽奖人数"
          align="center"
        />
        <el-table-column
          prop="duration"
          label="抽奖时长(分钟)"
          align="center"
        />
        <el-table-column
          prop="drawType"
          label="抽奖类型"
          align="center"
        />
        <el-table-column
          prop="content"
          label="抽奖内容"
          align="center"
        />
        <el-table-column
          prop="holder"
          min-width="80"
          align="center"
          label="参与条件"
        >
        <template slot-scope="scope">
          <div>
            {{scope.row.holder ? scope.row.holder : '--'}}
          </div>
        </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="抽奖状态"
          min-width="80"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="dui" label="操作" min-width="150" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="mini"
              :disabled="show"
              v-if="scope.row.status == '准备中' && !scope.row.show"
              @click="startdraw(scope.row,scope.$index)"
              >开始抽奖</el-button
            >
            <span style="color: #1890ff;margin-right:10px" v-if="scope.row.show">抽奖中 {{scope.row.msg}}</span>
            <el-button
              type="text"
              size="mini"
              v-if="scope.row.status =='准备中'"
              :disabled="scope.row.show"
              @click="updatadraw(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="mini"
              :disabled="scope.row.show"
              v-if="scope.row.status =='准备中'"
              @click="deletedraw(scope.row)"
              >删除</el-button
            >
            <el-button
              type="text"
              size="mini"
              v-if="scope.row.status =='已开奖' || scope.row.status == '已结束'"
              @click="seedraw(scope.row)"
              >查看抽奖结果</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :page-sizes="[20, 40, 60, 80]"
          :page-size="size"
          :current-page="current"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <el-dialog
      :title="drawname"
      :visible.sync="dialogVisible"
      width="50%"
      @close="dialogVisibleHide"
      :close-on-click-modal="false"
      class="PendingDeliveDialog"
      v-loading="load"
    >
    <el-row>
      <el-form
        ref="form"
        :model="value"
        label-width="120px"
        style="padding-top: 20px"
        :rules="rules"
      >
      <el-col :offset="2" :span="18">
        <el-form-item label="抽奖标题:" prop="title">
        <el-input v-model="value.title" placeholder="请输入抽奖标题" class="eitem"></el-input>
      </el-form-item>
      </el-col>
      <el-col :offset="2" :span="18">
        <el-form-item label="抽奖奖品:" prop="content">
        <el-input v-model="value.content" placeholder="请输入抽奖奖品" class="eitem"></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="18" :offset="2">
              <el-form-item label="抽奖方式:" prop="drawType">
                <el-radio-group v-model="value.drawType" required>
                  <el-radio :label="1" class="radio">评论</el-radio>
                  <el-radio :label="2">点赞</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
      <el-col :offset="2" :span="18" v-if="value.drawType==1">
        <el-form-item label="评论内容:">
        <el-input v-model="value.holder" placeholder="请输入评论内容" class="eitem"></el-input>
      </el-form-item>
      </el-col>
      <el-col :offset="2" :span="18">
        <el-form-item label="抽取人数" prop="number">
          <el-input-number :max="100" :min="1" v-model="value.number"></el-input-number>
          <el-tooltip
            class="item"
            effect="dark"
            content="抽取人数最大为100人，最小为1人"
            placement="right"
          >
            <i class="el-icon-question" style="margin-left: 10px"></i>
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col :offset="2" :span="18">
        <el-form-item label="抽奖时长" prop="duration">
          <el-input-number :max="10" :min="1" v-model="value.duration"></el-input-number>  分钟
          <el-tooltip
            class="item"
            effect="dark"
            content="抽奖时长最大为10分钟，最小为1分钟"
            placement="right"
          >
            <i class="el-icon-question" style="margin-left: 10px"></i>
          </el-tooltip>
        </el-form-item>
      </el-col>
      <el-col :span="18" :offset="2">
              <el-form-item label="抽奖备注:" prop="remark">
                <el-input v-model="value.remark" placeholder="请输入抽奖备注" class="eitem"></el-input>
              </el-form-item>
            </el-col>
      </el-form>
      <el-col :span="22" align="center">
        <el-button @click="dialogVisibleHide">取消</el-button>
        <el-button type="primary" @click="sub('form')">提交</el-button>
      </el-col>
    </el-row>

    </el-dialog>
    <el-dialog
      title="中奖名单"
      :visible.sync="dialogVisible1"
      width="50%"
      @close="dialogVisibleHide1"
      :close-on-click-modal="false"
      class="PendingDeliveDialog"
      v-loading="load"
    >
    <el-table
        ref="table"
        :data="zhonglist"
        style="width: 100%"
        size="mini"
        highlight-current-row
      >
      <el-table-column
          prop="userId"
          label="中奖人ID"
          align="center"
        />
      <el-table-column
          prop="cover"
          label="中奖人头像"
          align="center"
        >
          <template slot-scope="scope">
            <div class="demo-image__preview">
              <el-image
                style="width: 36px; height: 36px"
                :src="scope.row.avatar"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="nick"
          label="中奖人名称"
          align="center"
        />
    </el-table>
    </el-dialog>
  </div>
</template>
<script>
import {
  getlucklist,
  getlucklistadd,
  getlucklistupdata,
  getlucklistdelete,
  getluckliststart,
  getlucklistend,
  getlucklistdraw
} from "@/api/marketing.js";
export default {
  props:{
    liveId:{
      type:String,
      default:'',
    }

  },
  data() {
    return {
      timer:null,
      id:'',//直播间ID
      load: false,
      dialogVisible: false,
      dialogVisible1:false,
      drawname:'新增抽奖',
      show:false,
      countdown:0,//总抽奖时间
      value:{
        id:null,
        title:'',
        holder:'',
        content:'',
        duration:'',
        number:1,
        drawType:1,
        remark:null,
      },
      rules:{
        title: [
            { required: true, message: '请输入抽奖标题', trigger: 'blur' }
          ],
        content: [
            { required: true, message: '请输入抽奖奖品', trigger: 'blur' }
          ],
        duration: [
            { required: true, message: '请输入抽奖时长', trigger: 'blur' }
          ],
        number: [
            { required: true, message: '请输入抽奖人数', trigger: 'blur' }
          ],
        drawType: [
            { required: true, message: '请选择抽奖类型', trigger: 'change' }
          ],
        holder: [
            { required: true, message: '请输入评论内容', trigger: 'blur' }
          ],
      },
      headeNum: [
        { type: "", name: "全部" },
        { type: "noprize", name: "未开奖" },
        { type: "beingprize", name: "正在抽奖" },
        { type: "yesprize", name: "已开奖" },
      ],
      loginType: 0,
      listLoading: false,
      list: [], //抽奖信息
      zhonglist:[],//中奖信息
      size:20,
      current:1,
      total:0,
    };
  },
  created(){
    if (window.location.search.split("=")[1]) {
      this.id = window.location.search.split("=")[1];
      this.getlist();
    }
  },
  watch:{
    liveId(val){
      if(val){
        this.getlist()
      }
    }
  },
  methods:{
    pageChange(page) {
      this.current = page;
      this.getlist();
    },
    handleSizeChange(val) {
      this.size = val;
      this.current=1
      this.getlist();
    },
    getlist(){
      this.listLoading=true
      let parmas={
        liveId:this.liveId,
        size:this.size,
        current:this.current,
      }
      getlucklist(parmas).then(res=>{
        this.listLoading=false
         let code =res.records
         this.total=res.total
        code.map(item=>{
          item.show=false
          item.msg=''
        })
        this.$set(this,'list',code)
        console.log(this.list)
      }).catch(res=>{
        this.listLoading=false
      })
    },
    //开始抽奖
    startdraw(row,index){
      this.listLoading=true
      let parmas={
        id:row.id
      }
      getluckliststart(parmas).then(res=>{
        this.$emit('luckDrawStart')
        this.listLoading=false
        this.countdown=row.duration*60
        if (this.countdown > 0){
           this.show=true
          this.$set(this.list[index], 'show',true)
          console.log("choujiang",this.list)
          this.timer = setInterval(() => {
									this.CountDown(row,index)
								}, 1000)
        }
      }).catch(res=>{
        this.listLoading=false
      })
    },
    CountDown(row,index) {
      let that=this
				if (this.countdown > 0) {
					let minutes = Math.floor(this.countdown / 60) >= 10 ? Math.floor(this.countdown / 60) : '0' + Math
						.floor(this.countdown / 60);
					let seconds = Math.floor(this.countdown % 60) >= 10 ? Math.floor(this.countdown % 60) : '0' + Math
						.floor(this.countdown % 60);
					let msg = minutes + ":" + seconds;
          this.$set(this.list[index],'msg',msg)
					this.countdown--;
				} else {
					this.show=false
          this.$set(this.list[index], 'show',false)
					clearInterval(this.timer);
          let parmas={
            id:row.id
          }
          //直播抽奖截止
					getlucklistend(parmas).then(res=>{
            console.log(res)
            let data={
            id:row.id
          }
          //直播抽奖开奖
             getlucklistdraw(data).then(res=>{
               console.log(res)
               this.$emit('luckDrawEnd')
                that.getlist()
             })
          })
				}
			},
    //删除抽奖
    deletedraw(row){
      this.$confirm(
        "确定删除该投票抽奖，此操作不可逆, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(()=>{
      this.load=true
      getlucklistdelete(row.id).then(res=>{
        this.load=false
        this.getlist()
            this.$message({
            message: "操作成功",
            type: "success",
            duration: 2000,
          });
      }).catch(res=>{
        this.load=false
      })
      })
    },
    //抽奖编辑
    updatadraw(row){
      this.drawname="'"+row.name+"' "+"的抽奖修改"
      this.dialogVisible=true
      this.load==true
      let parmas={
        id:row.id
      }
      getlucklistupdata(parmas).then(res=>{
        this.load=false
        this.value={
          id:res.id,
          title:res.title,
          content:res.content,
          drawType:res.drawType=='评论' ? 1 : 2,
          holder:res.holder,
          number:res.number,
          duration:res.duration,
          remark:res.remark,
        }
        console.log(res)
      }).catch(res=>{
        this.load=false
      })
    },
    //提交抽奖
    sub(value){
      this.$refs[value].validate((res)=>{
        if(res){
          this.load=true
          let parmas={
            id:this.value.id,
            title:this.value.title,
            liveId:this.liveId,
            content:this.value.content,
            holder:this.value.drawType==1 ? this.value.holder : null,
            number:this.value.number,
            duration:this.value.duration,
            drawType:this.value.drawType==1 ? '评论' : '点赞',
            remark:this.value.remark ? this.value.remark : null
          }
          getlucklistadd(parmas).then(res=>{
            this.load=false
            this.dialogVisible=false
            this.value={
        title:'',
        holder:'',
        content:'',
        duration:'',
        number:1,
        drawType:1,
        remark:null
      }
      this.getlist()
            this.$message({
            message: "操作成功",
            type: "success",
            duration: 2000,
          });
          }).catch(res=>{
            this.load=false
          })
        }
      })
    },
    //新增||修改弹窗
    adddraw(){
      this.dialogVisible=true
    },
    //关闭弹窗
    dialogVisibleHide(){
      this.dialogVisible=false
      this.value={
        title:'',
        holder:'',
        content:'',
        duration:'',
        number:1,
        drawType:1,
        remark:null
      }
    },
    seedraw(row){
      this.load=true
      let parmas={
        id:row.id
      }
      getlucklistupdata(parmas).then(res=>{
        this.load=false
        console.log(res)
        this.dialogVisible1=true
        this.zhonglist=res.winners
      }).catch(res=>{
        this.load=false
      })
    },
    //关闭中奖弹窗
    dialogVisibleHide1(){
      this.dialogVisible=false
      this.zhonglist=[]
    },
  },
};
</script>
<style lang="scss">
  .eitem{
    width: 70%;
  }
</style>
